<template>
	<!-- 新闻详情 -->
	<div class="public_content news_content over-h">
		<!--左侧导航区开始-->
		<div class="public_content_left news_slide">
			<ul class="public_nav_vertical">
				<li>
					<div class="public_nav_vertical_title">
						<img src="~@/assets/img/news_icon_nav.png" class="po-re top-2b" alt="新闻图标">
						<span class="fcolor-00">新闻</span>
					</div>
					<dl class="public_nav_vertical_child">
		                <dd v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'child_click_dd':index==current}">
							<router-link :to="{path: `/index-list/${item.id}`}">
								<div class="fcolor-99 p-0-20">{{ item.name }}<i class="child_click_i"></i></div>
							</router-link>
		                </dd>                    						       
					</dl>
				</li>
			</ul>    			
		</div>
		<!--左侧导航区结束-->
		<!--右侧内容-->	
		<div class="public_content_right over-h">
		    <!--中间新闻内容开始-->
		    <div class="public_content_right_l pr-10 pull-left w-630  hr-sr-gray2">
		        <!--标题开始-->
		        <h2 class="center-text hr-sb-gray2 pb-15 fcolor-11 fsize-28" v-html="newsData.title"></h2>
		        <!--标题结束-->
		        <!--作者及时间开始-->
				<div class="w-all mt-10 over-h">
					<span class="fl w-50b center-text fsize-14 fcolor-99">发布人：{{newsData.createName}}</span>
					<span class="fr w-50b center-text fsize-14 fcolor-99">发表时间：{{newsData.createTime}}</span>
				</div>
		        <div class="fsize-14 ti-2 fcolor-11 lh-24 font-bold mt-20">
					<p class="text-l" v-html="newsData.content"></p>            
				</div>
		    </div>
		    <!--中间新闻内容结束-->
			<div class="public_content_right_r pull-right w-280 slide_r_news">
			    <div class="public_card_title">
			        <span class="fsize-16">热点新闻</span>
			    </div>
			    <ol class="public_card_content news_newsranking" v-if="newsList.length > 0">
			        <li class="lh-30" 
						v-for="(item,index) in newsList"
						@click="getNewsDetail(item.id)">
						<span v-html="item.title"></span>  
			        </li>
				</ol>
			</div> 
		</div>	
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				id:'',
				navList:[
					{name:'党建要闻',id:'221a19008fcd4b17b6780febb0f088b8'},
					{name:'党建论坛',id:'252da2668d754cdf9201349bedc3d507'},
					{name:'党员风采',id:'053551262afe4085b04c2f8d9ce06d60'},
					{name:'党建先锋',id:'afaa7a15198d4d1bb96094087322886e'},
					{name:'党建动态',id:'f38aa9a5322f466ba8cbaffe0ae36729'},
					{name:'红色文艺',id:'2'},
					{name:'党纪党规',id:'6d276e7572d8410ab43af4166ca615e3'},
					{name:'今日首推',id:'039137fe6198466a85728ff7f99f2126'},
					{name:'通知公告',id:'069d0ec015634c1cb95874b4b2d4e8fc'}
				],
				newsData:{},
				newsList:[],
				current:null   //当前高亮的左侧导航下标
			}
		},
		mounted(){
			this.init()
		},
		methods: {
			init(){
				this.id = this.$route.params.id;
				this.current = this.$route.params.type;
				this.$parent.$data.current = 1;
				this.getNewsDetail(this.id);
				this.getNewsList();
			},
			//获取新闻详情
			getNewsDetail(id){  
				this.$axios.get(`web/article/getArticleById`,{'articleId':id}).then(res => {
					if(res.data && res.data.code === 0){
						this.newsData = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			//获取右侧热点新闻
			getNewsList(){
				this.$axios.get(`web/article/articleList`).then(res => {
					if(res.data && res.data.code === 0){
						res.data.data.map((item)=>{
							//今日首推
							if(item.id == '039137fe6198466a85728ff7f99f2126'){
								this.newsList = item.articleEntity.slice(0,10)  
							}
						})
					}else {
						this.$message.error(res.data.msg)
					}
				})
			},
			addClassHandle(index){
				this.current = index
			}
		}
	}
</script>

<style scoped>
	/* 左侧导航 */
	.public_content_left{
		width: 200px;
		float: left;
		background: #fff;
	}
	.public_nav_vertical{
    box-shadow: 0 0 12px 0 rgba(4, 0, 0, 0.12);
    border: solid 1px rgba(245, 245, 245, 1);
}
.public_nav_vertical li .public_nav_vertical_title{
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
    font-family: 微软雅黑;
    border-bottom: solid 1px #dfdfdf;
}
.public_nav_vertical dl dd{
    border-bottom: solid 1px #f5f5f5;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}
.public_nav_vertical dl dd a{
    display: block;
    padding: 0 20px;
    font-weight: 500;
    color: #999;
}
.public_nav_vertical dl dd i{
    float: right;
    margin-top: 16px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-width: 5px 0 5px 8px;
    text-align: right;
}
.public_nav_vertical_child dd:hover{
    background: rgba(255, 235, 235, .8);
}
.public_nav_vertical_child .child_click_dd{
    background: rgba(255, 235, 235, .8);
}
.child_click_dd .child_click_i{
    border-color: transparent transparent transparent #cc0000;
}
	/*左侧导航结束*/
	/* 右侧内容 */
	.public_content_right{
		width: 960px;
		min-height: 410px;
		box-sizing: border-box;
		padding: 15px;
		float: right;
		background: #fff;
	}
	.public_content_right_l{
		min-height: 410px;
	}
	ol.public_card_content{
		padding-left: 22px;
	}
	ol.public_card_content > li{
		display: list-item;
		list-style: decimal;
		width: 100%;
		vertical-align: top;
		font-size: 14px;
		counter-increment: chapter;
	}
	.public_card_content span{
		display: inline-block;
		width: 100%;
		color: #333;
		vertical-align: top;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.public_card_content li:hover span{
		color: #ff3032;
		cursor:pointer;
	}
</style>